<template>
  <div class="chartsBox">
    <div v-show="!noData" ref="homeCharts" style="width: 100%; height:300px"></div>
    <div v-show="noData"><a-empty /></div>
  </div>
</template>
<script lang="ts" setup>
  import * as echarts from 'echarts';
  import { ref, onMounted, defineExpose, watch } from 'vue';
  const props = defineProps({
    chartData: {
      type: [Array, Object],
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    flag: {
      type: String,
      default: '1',
    },
  });
  //颜色
  let rgba1 = '';
  let rgba2 = '';
  if (props.flag == '1') {
    rgba1 = 'rgba(247, 138, 50, 1)';
    rgba2 = 'rgba(247, 168, 50, 0.47)';
  } else {
    rgba1 = 'rgba(0, 150, 136, 1)';
    rgba2 = 'rgba(167, 230, 192, 1)';
  }
  let homeCharts = ref();
  let noData = ref(false);
  const chartInit = () => {
    let myCharts = echarts.init(homeCharts.value);
    myCharts.setOption({
      title: {
        text: '',
      },
      legend: {
        show: true,
      },
      color: '#3398DB',

      tooltip: {
        trigger: 'axis',
        // axisPointer: {
        //   type: 'shadow',
        // },
        // backgroundColor: '#fff', // 悬浮框背景色
        // borderColor: '#000', // 悬浮框边框颜色
        // borderWidth: 1, // 悬浮框边框宽度
        // textStyle: {
        //   // 悬浮框文字样式
        //   color: '#000',
        //   fontSize: 12,
        // },
      },

      grid: {
        left: '3%',
        right: '3.5%',
        bottom: '3%',
        top: '18%',
        containLabel: true, //区域是否包含坐标轴的刻度线
      },
      xAxis: {
        data: props.chartData.xAxis, //可设置单个样式{value:"2023.01",textStyle:{fontSize:20,color:'red'}}
        axisTick: {
          //坐标轴刻度相关配置
          alignWithLabel: true,
          show: false,
        },
        axisLine: {
          //坐标轴轴线相关设置
          lineStyle: {
            color: '#CDC6C2',
            width: 1,
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          interval: 0, // 0强制显示所有标签，1隔一个标签显示一个标签，2各两个标签显示一个标签， auto默认会采用标签不重叠的策略间隔显示标签
          color: '#92949E',
        },
      },
      yAxis: {
        type: 'value',
        name: props.flag == '1' ? '单位/个' : '单位/个',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#CDC6C2',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#aaa',
        },
        splitLine: {
          show: false,
        },
        splitLine: {
          //网格线
          show: true, //是否显示
          lineStyle: {
            //网格线样式
            color: '#E7E7E7', //网格线颜色
            width: 1, //网格线的加粗程度
            type: 'dashed', //网格线类型
          },
        },
      },
      series: [
        {
          name: props.flag == '1' ? '样品数' : '项目数',
          type: 'bar',
          barWidth: '16px',
          itemStyle: {
            color: {
              //支持纯色、渐变色、条纹颜色
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: rgba1, // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: rgba2, // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
          data: props.chartData.yAxis,
        },
      ],
    });
    window.addEventListener('resize', () => {
      myCharts.resize();
    });
  };
  watch(
    () => props.chartData,
    (newVal, oldVal) => {
      if (newVal.xAxis.length > 0) {
        noData.value = false;
        chartInit();
      } else {
        noData.value = true;
      }
    }
  );

  onMounted(() => {
    // chartInit();
  });
  defineExpose({ chartInit });
</script>
<style lang="less" scope>
  .chartsBox {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    position: relative;
  }
  .selectInfo {
    position: absolute;
    top: 10px;
    right: 31px;
    z-index: 99;
    width: 80px;
  }
</style>
